<!-- 日期编辑框 -->
<template>
    <el-date-picker
        :ref="params.column.colDef.field + '_' + params.rowIndex"
        v-model="value"
        :type="dateProp.type"
        :format="dateProp.format"
        :value-format="dateProp.valueFormat"
        :placeholder="dateProp.placeholder"
        @keydown.native="handleKeydown"
        @change="onChange">
    </el-date-picker>
</template>
<script>
import Vue from 'vue'
import { DatePicker } from 'element-ui'
Vue.use(DatePicker)

const defaultProp = {
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm:ss',
    valueFormat: 'timestamp',
    placeholder: '',
    rules: []
}

export default Vue.extend({
    name: 'DateEditor',
    data() {
        return {
            value: '',
            dateProp: Object.assign({}, defaultProp)
        }
    },
    beforeMount() {
        this.dateProp = Object.assign({}, defaultProp, this.params.column.colDef.cellEditorParams || {});
        this.value = this.params.data[this.params.column.colDef.field] || '';
    },
    mounted() {
        setTimeout(() => {
            this.$refs[this.params.column.colDef.field + '_' + this.params.rowIndex] && this.$refs[this.params.column.colDef.field + '_' + this.params.rowIndex].focus()
        }, 0);
    },
    methods: {
        handleKeydown(event) {
            let KEY_LEFT = 37,
                KEY_UP = 38,
                KEY_RIGHT = 39,
                KEY_DOWN = 40,
                KEY_PAGE_UP = 33,
                KEY_PAGE_DOWN = 34,
                KEY_PAGE_HOME = 36,
                KEY_PAGE_END = 35,
                KEY_ENTER = 13,
                KEY_TAB = 9;

            let keyCode = event.keyCode;

            // let isNavigationKey = keyCode===KEY_LEFT || keyCode===KEY_RIGHT || keyCode===KEY_UP
            // || keyCode===KEY_DOWN || keyCode===KEY_PAGE_DOWN || keyCode===KEY_PAGE_UP
            // || keyCode===KEY_PAGE_HOME || keyCode===KEY_PAGE_END;

            // if (isNavigationKey) {
            //     event.stopPropagation();
            // }

            // 光标跳转
            if(keyCode === KEY_TAB || keyCode === KEY_ENTER){
                let {rowIndex, colKey, floating} = this.params.api.getFocusedCell();
                this.tabToNext({rowIndex, colKey, floating});
                event.stopPropagation();
            }
        },
        tabToNext({rowIndex, colKey, floating}) {
            let columnDefs = this.params.columnApi.getAllColumns();
            let rowTotal = this.params.api.getLastDisplayedRow();
            let rowPinned = this.params.column.colDef.pinned;
            let tabindex = this.params.tabindex || -1;
            let sameLineFlag = false;

            tabindex = tabindex + 1;
            for(let i = 0; i < columnDefs.length; i++){
                let tmpColDef = columnDefs[i].colDef;
                if(tmpColDef.cellEditorParams && tmpColDef.cellEditorParams.tabindex === tabindex){
                    sameLineFlag = true;
                    colKey = columnDefs[i].colId;
                    rowPinned = tmpColDef.pinned;
                    break;
                }
            }
            if(!sameLineFlag){
                rowIndex++;
                tabindex = 1;
                let tmpCol = columnDefs.filter(obj => obj.colDef && obj.colDef.cellEditorParams && obj.colDef.cellEditorParams.tabindex === 1)[0];
                colKey = tmpCol.colId;
                rowPinned = tmpCol.colDef && tmpCol.colDef.pinned;
            }
            if(rowIndex <= rowTotal){
                this.params.api.setFocusedCell(rowIndex, colKey);
                this.params.api.startEditingCell({
                    rowIndex: rowIndex,
                    colKey: colKey,
                    rowPinned: rowPinned
                });
            }
        },
        onChange(value) {
            this.value = value;
            this.handelDataDeal();
            this.params.api.redrawRows();
            setTimeout(() => {
                let rowIndex = this.params.rowIndex;
                let colKey = this.params.column.colDef.field;
                let floating = null;
                this.tabToNext({rowIndex, colKey, floating});
            }, 0);
        },
        handelDataDeal() {
            if (_.isFunction(this.dateProp.dataDeal)) {
                this.params.data[this.params.column.colDef.field] = this.value;
                let res = this.dateProp.dataDeal(this.value, this.params.data, this.params);
            }
        },
        getValue() {
            this.handelDataDeal();
            let valid = this.validateCell(this.params.data, this.value, this.dateProp.rules) || {};
            let tmpValid = this.params.data.tmsValid || [];
            if(tmpValid.some(obj => obj.rowIndex === this.params.rowIndex && obj.colKey === this.params.column.colId)){
                tmpValid.map(obj => {
                    if(obj.rowIndex === this.params.rowIndex && obj.colKey === this.params.column.colId){
                        obj.tmsError = valid.tmsError || false;
                        obj.tmsErrorMessage = valid.tmsErrorMessage || '';
                    }
                    return obj;
                })
            }else{
                tmpValid.push({
                    rowIndex: this.params.rowIndex,
                    colKey: this.params.column.colId,
                    tmsError: valid.tmsError || false,
                    tmsErrorMessage: valid.tmsErrorMessage || ''
                })
            }
            this.params.data.tmsValid = tmpValid;
            return this.value
        }
    }
})
</script>